/******** 让eltable滚动条符合辣鸡测试的要求 ********/
import scrollDom from "./scrollDom.vue";
export default Vue => {
    return Vue.directive("tableScroll", {
        bind(el, binding, vnode) {
            // 先声明实例变量
            var instance = null;

            Vue.nextTick(() => {
                // if (!Array.from(el.classList).includes('hideScroll')) {
                //     el.classList.add("hideScroll")
                // }
                // console.log(el);
                
                let obelem = el
                    .querySelector(".el-table__body-wrapper")
                    .querySelector("table > tbody");
                // 监听table内容变化
                var observer = new MutationObserver(createScroll);
                var config = { childList: true };
                observer.observe(obelem, config);
            });   
            // 创建滚动条
            function createScroll() {
                setTimeout(() => {
                    let table = el.querySelector(".el-table__body-wrapper"),
                        fixedLeft = el.querySelector(".el-table__fixed")
                            ? el.querySelector(".el-table__fixed").offsetWidth
                            : 0,
                        fixedRight = el.querySelector(".el-table__fixed-right")
                            ? el.querySelector(".el-table__fixed-right").offsetWidth
                            : 0;
                    // 获取滚动条需要的参数
                    let scrollsData = {
                        table,
                        elem: el,
                        fixedLeft, // 左边固定列
                        fixedRight, // 右边固定列
                        xLeft: fixedLeft || 0, // X轴距离左侧的距离
                        // X轴可视区域宽
                        xWidth:
                            table.offsetWidth -
                            (fixedLeft ? fixedLeft : 0) -
                            (fixedRight ? fixedRight : 0),
                        // X轴实际宽
                        xScrollWidth:
                            table.querySelector("table").offsetWidth -
                            (fixedLeft ? fixedLeft : 0) -
                            (fixedRight ? fixedRight : 0),
                        yScrollHeight: table.querySelector("table").offsetHeight, // Y轴实际宽
                        yWidth: table.offsetHeight, // Y轴可视区域宽
                        scrollBottom: el.querySelector(".el-table__footer-wrapper")
                            .offsetHeight // 滚动条距离底部的距离
                    };
                    console.log(scrollsData);
                    // 实例存在就只需要修改参数
                    if (instance) {
                        for (const key in scrollsData) {
                            instance[key] = scrollsData[key];
                        }
                        return;
                    }

                    let mixin = {
                        data() {
                            return scrollsData
                        }
                    };
                    // 创建子类 使用mixins的方式加入参数
                    var Elem = Vue.extend(scrollDom);
                    instance = new Elem({
                        mixins: [mixin]
                    });
                    instance = instance.$mount();
                    // 挂在到el里
                    el.appendChild(instance.$el);
                }, 300);
            }
        },
        unbind() {
            // 解绑监听
            window.onresize = null;
        }
    });
};
